<template>
  <div class="mdh">页面效果</div>
  <div class="view">
    <oTable :tableOptions="tableOptions" />
  </div>
  <div class="view">tableOptions中最重要的属性为：</div>
  <CodeView :code="codeProperty" />
  <div class="mdh">列表详细</div>
  <CodeView :code="code" />
</template>
<script setup lang="tsx">
import { oTable } from 'oneui'
import dataGithub from '../mock/data'
const codeProperty = `
// 表格属性配置入口
tableOptions() {
  return {
    // 【**必填】每列字段
    columns: [],
    // 【**必填】接口Promise，可提供一个Promis对象，或者多个Promise的数组，同时请求成功后显示列表
    pageApiPromise: userfz,
    // 【**可选】修改请求参数钩子函数
    // 【若上述pageApiPromise传多个Promise的数组，则会收到多个params，多个例子查看 /user/list/popup.js showAllGameBalance 中 requestHandler】
    requestHandler: (params)=> { return params },
    // 【**可选】修改返回结果的钩子函数，
    // 【若上述pageApiPromise传多个Promise的数组，则会收到多个返回结果，多个例子查看 /user/list/popup.js showAllGameBalance 中 requestHandler】
    responseHandler: (res)=>  { return res },
    // 【可选】表格数据可以直接提供，如果pageApiPromise不提供，会查找dicData数组
    dicData: [],
    // 【可选】el-table原始属性可以配置
    tableProps: {},
    // 【可选】打开页面就请求数据，默认不为false就加载
    loadImmediate: true,
    // 【可选】是否显示底部分页条
    pagination: true,
    // 【可选】表格打开虚拟列表
    useVirtual: false,
    // 【可选】重写底部，通常表格底部只有一行统计数据，如果需要两行数据，可以用 appendSummary 改写
    //  例子查看 /pay/chongzhi/sdList/index.vue  appendSummary 函数
    appendSummary: function ({ columns, data }, columnsSync){ return [] }, //扩展一行底部
  };
},
`
const code = `
const tableOptions = computed(() => {
  return {
    columns: [
      {
        width: 70,
        fixed: 'left',
        type: 'selection',
        label: '全选'
      },
      {
        prop: 'avatar_url',
        label: '照片',
        width: 80,
        align: 'center',
        comtype: 'picture',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'received_events_url',
        label: '地址',
        sortable: true,
        width: 200,
        align: 'center',
        showTooltip: true,
        view: (row: any) => {
          console.log('view', row)
        },
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'type',
        label: '标签',
        width: 100,
        align: 'center',
        comtype: 'tag',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'money',
        label: '金额',
        width: 100,
        align: 'center',
        comtype: 'money',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        width: 100,
        prop: 'html_url',
        comtype: 'upload',
        label: '上传大文件'
      },
      {
        width: 100,
        prop: 'do_url',
        comtype: 'download',
        label: '下载大文件'
      },
      {
        width: 110,
        prop: 'starred_url',
        comtype: 'switch',
        label: '开关',
        activeText: '开',
        inactiveText: '关'
      },
      {
        width: 240,
        prop: 'gravatar_id',
        comtype: 'slider',
        label: '声音',
        formItemStyle: { width: '220px' },
        showInput: true
      },
      {
        width: 90,
        prop: 'organizations_url',
        comtype: 'link',
        label: '声音',
        value: '跳转百度',
        onClick() {
          alert(1)
        }
      },
      {
        width: 130,
        prop: 'gender1',
        comtype: 'checkbox',
        label: '性别',
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 2 }
        ],
        value: '女'
      },
      {
        comtype: 'button',
        label: '操作',
        value: '发送'
      }
    ],
    pageApiPromise: function (param: any) {
      return new Promise(resolve => {
        resolve({
          total: 1000,
          items: dataGithub.slice(
            (param.currentPage - 1) * param.pageSize,
            param.currentPage * param.pageSize
          )
        })
      })
    }
  } as any
})
`
const formData = reactive({})
provide('formData', formData)
const eventData = reactive({})
provide('eventData', eventData)

const paggingData = reactive({
  currentPage: 1,
  pageSize: 2,
  pageSizes: [10, 50, 100, 300, 500, 800, 1000]
})
const tableData = reactive({
  items: [],
  total: 0
})
provide('eventData', eventData)
provide('formData', formData)
provide('tableData', tableData)
provide('paggingData', paggingData)
const tableOptions = computed(() => {
  return {
    columns: [
      {
        width: 70,
        fixed: 'left',
        type: 'selection',
        label: '全选'
      },
      {
        prop: 'avatar_url',
        label: '照片',
        width: 80,
        align: 'center',
        comtype: 'picture',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'received_events_url',
        label: '地址',
        sortable: true,
        width: 200,
        align: 'center',
        showTooltip: true,
        view: (row: any) => {
          console.log('view', row)
        },
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'type',
        label: '标签',
        width: 100,
        align: 'center',
        comtype: 'tag',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        prop: 'money',
        label: '金额',
        width: 100,
        align: 'center',
        comtype: 'money',
        edit: (row: any) => {
          console.log('edit', row)
        }
      },
      {
        width: 100,
        prop: 'html_url',
        comtype: 'upload',
        label: '上传大文件'
      },
      {
        width: 100,
        prop: 'do_url',
        comtype: 'download',
        label: '下载大文件'
      },
      {
        width: 110,
        prop: 'starred_url',
        comtype: 'switch',
        label: '开关',
        activeText: '开',
        inactiveText: '关'
      },
      {
        width: 240,
        prop: 'gravatar_id',
        comtype: 'slider',
        label: '声音',
        formItemStyle: { width: '220px' },
        showInput: true
      },
      {
        width: 90,
        prop: 'organizations_url',
        comtype: 'link',
        label: '声音',
        value: '跳转百度',
        onClick() {
          alert(1)
        }
      },
      {
        width: 130,
        prop: 'gender1',
        comtype: 'checkbox',
        label: '性别',
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 2 }
        ],
        value: '女'
      },
      {
        comtype: 'button',
        label: '操作',
        value: '发送'
      }
    ],
    pageApiPromise: function (param: any) {
      return new Promise(resolve => {
        resolve({
          total: 1000,
          items: dataGithub.slice(
            (param.currentPage - 1) * param.pageSize,
            param.currentPage * param.pageSize
          )
        })
      })
    }
  } as any
})
</script>
